<template>
    <div>
        <div>
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="访问状态">
                    <el-select v-model="zhuangt" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="访问人">
                    <el-input
                            v-model="marketName"
                            placeholder="请输入市场部"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="findAll()">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--        访客记录-->
        <div>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="houseingname"
                        label="访问房屋"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="visitorsName"
                        label="访客姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="状态">
                </el-table-column>
                <el-table-column
                        prop="visitorsAge"
                        label="访客性别">
                </el-table-column>
                <el-table-column
                        prop="visitorsPhone"
                        label="访客手机号码">
                </el-table-column>
                <el-table-column
                        prop="accessTime"
                        label="访问日期"

                >
                    {{accessTime}}
                </el-table-column>
                <el-table-column
                        prop="duration"
                        label="访问时长">
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="FindById(scope.row.visitorsRecordId)"
                        >查看详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                accessTime:'',
                // 访问人
                time1: '',
                marketName: '',
                options: [{
                    value: '选项1',
                    label: '全部'
                }, {
                    value: '选项2',
                    label: '待失效'
                }, {
                    value: '选项3',
                    label: '生效中'
                }, {
                    value: '选项4',
                    label: '已失效'
                }],
                zhuangt: '',

                tableData: []
            }
        },

        created() {
            //查询我的基本信息
            this.findAll();
            this.accessTime = this.timestampToTime(this.tableData.accessTime)

        },
        methods: {
            timestampToTime(time) {
                // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var date = new Date()
                let y = date.getFullYear()
                let MM = date.getMonth() + 1
                MM = MM < 10 ? ('0' + MM) : MM
                let d = date.getDate()
                d = d < 10 ? ('0' + d) : d
                let h = date.getHours()
                h = h < 10 ? ('0' + h) : h
                let m = date.getMinutes()
                m = m < 10 ? ('0' + m) : m
                let s = date.getSeconds()
                s = s < 10 ? ('0' + s) : s
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
            },
            findAll() {
                this.$axios
                    .get("/systemuser/sfangke/findAll", {
                        params: {
                            //获取的周期
                            id: 1,
                            zhuangt: this.zhuangt,
                            name: this.marketName
                        },
                    })
                    .then((res) => {
                        this.tableData = res.data;

                    });
            },

            FindById(id) {
                //   直接调用$router.push 实现携带参数的跳转
                this.$router.push({
                    path: `/visitorFind/${id}`
                })

            }
        }

    }
</script>

<style scoped>

</style>
